<template>
  <div class="beijing">
    <div class="entirety">
      <div class="pic">
        <img src="../assets/image/icon-login.png" alt="" style="width: 410px; height: 350px;" />
      </div>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" :label-position="labelPosition" class="form">
        <h4>欢迎登录！</h4>
        <h4>河北省网联可信数据空间综合服务平台</h4>
        <div class="title" id="wrap">
          没有账号？去<router-link to="/ZhuCe" class="router">注册</router-link>
        </div>
        <el-form-item prop="phone" label-width="30px" class="item">

          <el-input placeholder="请输入手机号" class="int" clearable v-model="ruleForm.phone">
            <i slot="prefix" class="el-icon-phone-outline" style="font-size:18px;
            padding-right: 15px;
            color:rgb(169, 170, 170);
            "></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password" label-width="30px">

          <el-input placeholder="请输入密码" type="password" class="int" clearable v-model="ruleForm.password">
            <i slot="prefix" class="el-icon-lock" style="font-size:18px;
            padding-right: 15px;
            color:rgb(169, 170, 170);
            "></i>
          </el-input>
        </el-form-item>
        <div class="but-box">
          <el-button type="text" @click="ToYanZhengMaLogin">短信验证码登录</el-button>
          <el-button type="text" class="textBut" @click="ToXiugai">忘记密码了？ 去修改</el-button>
        </div>
        <el-form-item style="width: 100%; text-align: center; margin-top: 20px;">
          <el-button type="primary" round @click="login(ruleForm)">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { MimaLogin, isPhoneNumber } from '../api/api.js'
import axios from 'axios'
export default {
  data() {
    return {
      labelPosition: 'right',
      ruleForm: {},
      rules: {
        phone: [
          { required: true, trigger: 'blur', message: '请输入手机号' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
        ],
        password: [{ required: true, trigger: 'blur', message: '请输入密码' }]
      }
    }
  },
  methods: {
    login() {
      if (isPhoneNumber(this.ruleForm.phone)) {
      } else {
        this.$message.error('请输入正确的手机号')
        return
      }
      MimaLogin(this.ruleForm.phone, this.ruleForm.password)
        .then(res => {
          this.$store.state.Denglulist = res.data.data
          if (res.data.code != 200) {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          } else if (res.data.code == 200) {
            localStorage.setItem('list', JSON.stringify(res.data.data))
            this.$message({
              message: '登录成功',
              type: 'success',
              duration: 1000,
              onClose: () => {
                this.$router.push('/')
                location.reload()
              }
            })
          }
        })
        .catch(error => {})
    },
    ToXiugai() {
      this.$router.push('/XiuGai')
    },
    ToYanZhengMaLogin() {
      this.$router.push('/YanZhengMaLogin')
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-form-item__error {
  left: 35px;
}

.beijing {
  width: 100%;

  height: 100%;
  background-image: url('../assets/image/bglogin.png');
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;

  .entirety {
    width: 850px;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: aliceblue;
    border-radius: 15px;

    .pic {
      margin-right: 10px;
    }

    h4 {
      color: #000088;
      margin-bottom: 20px;
      margin-left: 30px;
    }

    .title {
      font-size: 14px;
      display: flex;
      justify-content: right;
      margin-top: 20px;
      margin-left: 98px;
      padding: 5px;

      .router {
        text-decoration: none;
      }
    }

    .form {
      width: 350px;
      padding-top: 40px;
    }

    .item {
      margin-top: 20px;
    }

    .int {
      width: 250px;
    }

    /deep/ .el-input__inner {
      border-top-width: 0px;
      border-left-width: 0px;
      border-right-width: 0px;
      border-bottom-width: 2px;
      background-color: transparent !important;
    }

    .but-box {
      width: 100%;
      display: flex;
      flex-direction: row;
      // justify-content: space-between;
      margin-left: 30px;

      .textBut {
        font-size: 14px;
        margin-left: 58px;
      }
    }
  }
}
</style>
